一、项目背景

很多人购买网络摄像头后，视频数据会经过厂商服务器。

例如：

摄像头
   ↓
厂商云服务器
   ↓
手机APP

这样虽然方便，但存在几个问题：

数据不在自己手里
厂商停止服务后设备可能失效
无法深度定制
隐私依赖第三方平台

如果你已经拥有：

一台云服务器
一个域名
一块 ESP32-CAM

那么完全可以搭建属于自己的网络摄像头系统。

最终架构：

ESP32-CAM
    ↓ HTTP上传
Node.js
    ↓
保存最新图片

Nginx
    ↓
cam.example.com
    ↓
浏览器实时查看

二、技术选型

ESP32-CAM

负责：

拍照
WiFi联网
上传图片

特点：

成本低（30元左右）
自带摄像头
支持 JPEG

Node.js

负责：

接收上传图片
保存图片
提供 API

优点：

开发简单
性能足够
与前端配合方便

Nginx

负责：

域名解析
HTTPS证书
反向代理

架构：

Internet
    ↓
Nginx
    ↓
Node.js

三、硬件清单

名称	数量	价格
ESP32-CAM(AI Thinker)	1	30元
CP2102下载器	1	10元
杜邦线	若干	5元
5V2A电源	1	10元

总预算：

约50~80元

四、服务器环境

假设：

Ubuntu 24.04

域名：

cam.example.com

服务器IP：

1.2.3.4

五、安装Node.js

更新系统

sudo apt update
sudo apt upgrade -y

安装Node.js

推荐LTS版本：

curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -

sudo apt install nodejs -y

验证：

node -v

npm -v

输出类似：

v22.x.x

10.x.x

六、创建项目

创建目录

mkdir camera-server

cd camera-server

初始化项目

npm init -y

安装依赖

npm install express multer

说明：

express
负责Web服务

multer
负责上传文件

七、编写Node服务

创建：

server.js

代码：

const express = require("express");
const multer = require("multer");
const fs = require("fs");

const app = express();

const upload = multer({
    storage: multer.memoryStorage()
});

app.post(
    "/upload",
    upload.single("image"),
    (req, res) => {

        fs.writeFileSync(
            "./public/latest.jpg",
            req.file.buffer
        );

        res.send("OK");
    }
);

app.use(
    "/",
    express.static("public")
);

app.listen(3000, () => {
    console.log("Server Start");
});

八、创建网页

创建目录：

mkdir public

创建：

public/index.html

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ESP32 Camera</title>
</head>
<body>

<h2>实时监控</h2>

<img
    id="camera"
    width="640"
>

<script>

setInterval(() => {

    document.getElementById("camera").src =
        "latest.jpg?t=" + Date.now();

},1000);

</script>

</body>
</html>

原理：

每秒刷新一次图片

避免浏览器缓存

九、启动Node服务

node server.js

输出：

Server Start

测试：

http://服务器IP:3000

即可访问。

十、安装Nginx

sudo apt install nginx -y

启动：

sudo systemctl start nginx

sudo systemctl enable nginx

十一、配置反向代理

创建：

sudo nano /etc/nginx/sites-available/camera

配置：

server {

    listen 80;

    server_name cam.example.com;

    location / {

        proxy_pass http://127.0.0.1:3000;

        proxy_http_version 1.1;

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;
    }
}

启用：

sudo ln -s \
/etc/nginx/sites-available/camera \
/etc/nginx/sites-enabled/

检查：

sudo nginx -t

重载：

sudo systemctl reload nginx

十二、申请HTTPS

安装：

sudo apt install certbot \
python3-certbot-nginx -y

申请：

sudo certbot --nginx

完成后：

https://cam.example.com

即可访问。

十三、ESP32-CAM上传代码

核心上传逻辑：

HTTPClient http;

http.begin(
    "https://cam.example.com/upload"
);

http.addHeader(
    "Content-Type",
    "multipart/form-data"
);

http.POST(
    fb->buf,
    fb->len
);

流程：

拍照
 ↓
JPEG
 ↓
POST
 ↓
Node.js
 ↓
latest.jpg

十四、生产环境部署

不要直接：

node server.js

十五、项目运行流程

ESP32-CAM
    ↓
WiFi

上传JPEG

    ↓

Node.js
接收图片

    ↓

latest.jpg

    ↓

Nginx

    ↓

HTTPS

    ↓

cam.example.com

十六、后续升级方向

当前方案：

1 FPS
图片轮询

可升级：

MediaMTX

实现：

RTSP
↓
WebRTC
↓
浏览器实时观看

AI识别

结合：

OpenCV
YOLO

实现：

人脸识别
车辆识别
宠物识别

录像功能

保存：

按天存储

2026-06-07/
2026-06-08/

实现历史回放。

总结

本方案利用 ESP32-CAM、Node.js 和 Nginx，在不到 100 元硬件成本的情况下，实现了一个支持域名访问、HTTPS 加密、远程查看的自建网络摄像头系统。

核心优势：

完全自主控制数据
不依赖第三方云平台
成本极低
易于扩展 AI、录像、WebRTC 等高级功能

本文部分内容借助 AI 辅助生成，并由作者整理审核。

使用 ESP32-CAM + Node.js + Nginx 搭建自己的网络摄像头